<template>
  <div class="job-want">
    <head-top head-title="求职找工" job-publish="立即发布"
              @toJob="$router.push('/TookPublish/'+types)"></head-top>
    <div class="job-box">
      <ul>
        <li v-for="(job,index) in jobList" :key="index" @click="$router.push('/TookDetail/'+types+'/'+job.id)">
          <div class="box-top">
            <img :src="job.avatar" alt="">
            <span>{{job.real_name}}</span>
          </div>
          <div class="box-middle">
            <div class="middle-top">
              <span>{{job.title}}</span>
              <span>￥{{job.money}}</span>
            </div>
            <p>{{job.content}}</p>
          </div>
          <div class="box-bottom">
            <button>{{job.type_name}}</button>
            <span>发布时间：{{job.created_at}}</span>
            <span>浏览量：{{job.view}}</span>
          </div>
        </li>
        <!--没有数据的时候显示暂无数据-->
        <li v-if="flag&&jobList.length === 0" class="no_data">
          <img src="../../assets/default.png" alt="" width="100" height="100">
          <p>抱歉！暂无数据</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import headTop from '../header/Header.vue'
  import { getJobList } from '../../api/supervise'

  export default {
    name: 'JobWant',
    data () {
      return {
        types: 'JobWant',
        jobList: [],
        flag: false // 标识：没有数据的时候
      }
    },
    // 缓存从详情页返回来的位置
    beforeRouteEnter: (to, from, next) => {
      if (from.name === 'TookDetail') {
        to.meta.isBack = true
      }
      next()
    },
    activated () {
      if (!this.$route.meta.isBack) {
        // this.orderList()
      }
      this.$route.meta.isBack = false
    },
    created () {
      this._getJobList()
    },
    methods: {
      // 列表数据
      _getJobList () {
        getJobList().then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.jobList = res.data.reverse()
            // console.log(this.jobList)
          }
        })
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss" scoped>
  .job-want {
    padding-bottom: 50px;
    .job-box {
      width: 100%;
      ul {
        li {
          padding: 10px;
          border-bottom: 10px solid #f2f2f2;
          .box-top {
            display: -webkit-box;
            display: -moz-box;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #d7d7d7;
            padding: 0 0 10px 0;
            img {
              width: 40px;
              height: 40px;
              border-radius: 50%;
            }
            span {
              margin-left: 10px;
              font-size: 15px;
            }
          }
          .box-middle {
            border-bottom: 1px solid #d7d7d7;
            .middle-top {
              display: -webkit-box;
              display: -moz-box;
              display: -webkit-flex;
              display: -moz-flex;
              display: -ms-flexbox;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 10px 0;
              span {
                font-size: 15px;
              }
              span:last-child {
                color: red;
              }
            }
            p {
              font-size: 14px;
              line-height: 20px;
              padding-bottom: 10px;
            }
          }
          .box-bottom {
            display: -webkit-box;
            display: -moz-box;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0 0 0;
            button {
              background: #fff;
              color: #2585d0;
              border: 1px solid #2585d0;
              outline: none;
            }
            span {
              font-size: 13px;
              color: #999999;
            }
          }
        }
        .no_data {
          /*width: 100%;*/
          text-align: center;
          color: #0b7ad9;
          font-size: 14px;
          border-bottom: none;
          img {
            padding-top: 20px;
          }
          p {
            margin-top: 5px;
          }
        }
      }
    }
  }
</style>
